Muchos lo preguntan y todos lo queremos saber.
¿Hay forma de añadir imágenes en Blogger y que se muestren en su tamaño original?
La respuesta es SI pero cuidado, puedes añadir cualquier tamaño pero no superior al espacio de las entradas de tu blog.
En algunas plantillas la medida de las entradas viene reflejado de la siguiente forma:
El espacio que nuestra plantilla tiene para los post es el width que trae establecido en main.
Pongamos por ejemplo que tenemos una plantilla Minima modificada con la idea de añadir grandes fotografías en main-wrapper tiene de ancho 780 (width:780px;) subimos una imagen a una entrada y nos proporciona un código más o menos así:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://xxx/s1600-h/nombre.jpg"><img style="cursor: pointer; width: 400px; height: 320px;" src="http://xxx/s400/nombre.jpg" alt="" id="BLOGGER_PHOTO_ID_xxx00290" border="0" /></a>

Escogiendo el tamaño grande nos mostraría una imagen de 400px × 320px para que esa imagen se mostrara en su tamaño original 640px × 512px lo que haríamos sería eliminar todo lo de color rojo (enlace que nos abre la imagen en una nueva ventana) y conservar la parte en azul. En esa parte resaltada en negrita (400) omitimos el 4 y en su lugar añadimos 0 quedaría así:

<img style="cursor: pointer; width: 400px; height: 320px;" src="http://xxx/s000/nombre.jpg" alt="" id="BLOGGER_PHOTO_ID_xxx00290" border="0" />
Con ese cambio mostramos una imagen de 640px × 512px.

Muchos tenemos la costumbre de acceder al blog por Blogger in draft en este caso el código de una imagen sería distinto aunque referente al tamaño el resultado es el mismo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://xxx/s1600-h/nombre.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://xxx/s400/nombre.jpg" /></a></div>

Desechamos la parte en color rojo, y conservamos la azul y verde, esta última es para la ubicación de la imagen si eliminamos el color verde la imagen se situará a la izquierda pero no es problema porque situándose en la pestaña Redactar podemos arrastrar la imagen.

Otro ejemplo adaptado a esta entrada. Mi plantilla tiene de main-wrapper width:510px quiero añadir una imagen y escojo la opción grande (400)

Pienso que la quiero mostrar en su tamaño original (500px×333px)no es mucha la diferencia pero puede hacerse así que donde dice /s400/ lo cambio por /s000/ el resultado sería la imagen en su tamaño original


Lo único a tener en cuenta es no intentar subir una imagen de tamaño superior al espacio de nuestras entradas porque seguramente desplazaría nuestra sidebar situándola al final de las entradas.


Charo Bolivar

Este es un tema que me traía de cabeza, gracias por darnos la respuesta.

Besos

Responder
Liz Marin

gracias gema yo tambien queria saber como

besitosss

Responder
Anónimo

Buena y fria tarde, al inicio de mi mundo blogger no sabes como me llegó a costar lo de las imagenes.
Aportes como estos, claros y sencillos hacen que nuestros blogs queden "estupendos" cuando editamos los posts.
Un saludo,
Sisco

Responder
Gem@

En realidad es un dato que vengo utilizando desde hace bastante tiempo porque no me gusta que al clicar en la imagen dirija a otra página (donde nos muestra la ampliación) lo había explicado mucho y creo que así estará más detallado :)
Me alegra que os sea útil Charo y Elisabeth.

Sisco aquí hace frío está lloviendo. Me alegra que te guste el dato ;)

Responder
Jaime Trujillo Escobedo

Hola Gem@, queria decirte que me encanta el truco, la verdad es que las imagenes en tamaño original nos gustan a muchos, y al poder poner imagenes enormes o enanitas en blogger, eso es genial!! gracias Gem@ por el truco y por explicarlo todo tan bien :)

Responder
Unknown

lo has explicado como una señorita maestra!!!...besitos!!!...sigue sin llegar el correo

Responder
Gem@

Gracias Jaime y a ti también Graciela ;)

Responder
Anónimo

Solo una pequeña pregunta como hago para que no se amplie la imagen y quede una sola.

Osea que no se le pueda dar click si no que se aprecie con un solo tamaño gracis. :)

Responder
Gem@

Anónimo eso lo conseguimos cuando eliminamos lo señalado de color rojo, es algo que apliqué pero omití explicar. Lo he añadido entre paréntesis.
De resultado sería obtener un código limpio que sólo mostrara la imagen original.

Responder
Jose, a secas

Buen tutorial hermana, como siempre ;)

Un abrazo.

Responder
Gem@

Hola hermanito me alegra verte por aquí :)

Responder
Anónimo

gracias gema por eso no te cambio ;)

Responder
Gem@

Difícilmente me pueden cambiar ya pasó la garantía jajaja es broma.
Gracias por comentar :)

Responder
jabón jabón

Gema, tengo un puzzle de fotos que se comporta como una imagen única quisiera que se pudiese hacer que al pinchar en una se abriese cada una individualmente. ¿como podría hacer esto?
gracias por tu maravillosa ayuda.
pilar

Responder
Gem@

Lo he visto en tu blog Pilar pero la explicación es muy extensa como para un comentario, si te parece mejor hago una entrada sobre esa sugerencia.

Responder
jabón jabón

¡Que bien! Muchas gracias, Gema, espero tu ayuda.

Responder
Petterjuice

hola gema! soy de nuevo yo...
ya sabias mas o menos ese truco en realidad usaba los img de html.. peor andaba en busca de algo mas automatizado..
existe algo asi?

Responder
Gem@

Petterjuice Blogger sólo permite subir tres tamaños de imagen, que yo sepa la única forma de mostrar una imagen en su tamaño original es de este modo a no ser que añadieras una ventana modal y eso te diera la posibilidad de mostrarla ampliada sin salir de la página.

yz jabón jabón me olvidé por completo de esa entrada, me lo anoto para la próxima.
Sorry...

Responder
Tepikoso

Como agrego una palicula de flash en mis post !! :( pos esque no puedo !! no se como

Responder
Gem@

Tendría que ver ese código Tepikoso :O

Responder
AFUA

Gema, cómo puedo crear una galeria de imagenes en mi blog. gracias

Responder
Gem@

Hola Pilar sobre galerías hay mucho que ver pero si mal no recuerdo yo sólo hablé de una creada con html aunque resulta bien hay otras mucho más vistosas y agradables a la vista.
Mira en el siguiente enlace es una que comentaba J.Miur y queda linda.
Galería de imágenes ;)

Responder
Motoramica | Historia del Motor

Muy buena esta explicación, tambien me gustaría saber otra cosa que no encuentro.
¿cómo podría hacer para colocar un gadget (imagen) que solo aparezca en la página de incicio arriba de todas las entradas?
Que aparezca soló en la página de incio a modo de portada.
Gracia Gem@!

Responder
Gem@

yz Retro Icon mira aquí :)

Responder
Gem@

yz Retro Icon también añadir estilos a ese gadget con las explicaciones del otro
día

Responder
Desayunos Buen Regalo

hola quisiera hacerte una pregunta que es simple pero no la puedo encontrar en ningun lado cual es el codigo
para poner dos imagenes una al lado de la otra con la opcion para cambiarlas de tamaño a cada una? gracias exelente blog!!! saludos..

Responder
Gem@

yz www.2xshop.com.ar para que una imagen quede junto a la otra es tan sencillo como que los dos códigos de imagen queden continuos es decir uno seguido de otro.
Lo de cambiarlas de tamaño no sé a qué te refieres ¿ampliarla?

Responder
Admin

Muy buena esta entrada Gemit@, no me acordaba de ella, me ha servido mucho en mi blog de fotos, pero tengo una inquietud ;) no se podría aplicar este código por así llamarlo dentro de la plantilla para no tener que modificar las fotos una a una a medida que las vas subiendo?
O sea que ya solo reconociera las medidas originales de las fotos? No se si me hago entender? :o
Besote ;)

Responder
Gem@

yz Hola k_nelita, se podría probar en .post img son los estilos de las imágenes de los post, habría que añadir width para la anchura y height para la altura y ya de paso le añades un borde lindo ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top